<template>
    <a-layout style="height: 100%;">
        <PluginComp Plugin="Portal.Header">
            <template #Logo>
                <h3 class="title">
                    <RouterLink to="/app">
                        <span class="iconfont icon-16gf-appsSmall"></span>
                    </RouterLink>
                    <div>应用名称</div>
                </h3>
            </template>
            <template #CenterMenu>
                <a-menu class="MenuStyle" :selectedKeys="MenuSelectKey" mode="horizontal" :items="items" />
            </template>
            <template #Setting>
                <div class="Setting">
                    <slot name="Setting"></slot>
                </div>
            </template>
        </PluginComp>
        <slot></slot>
    </a-layout>
</template>

<script setup>

import { ref, h, provide, computed } from 'vue';
import { useRoute, RouterLink } from 'vue-router';

const route = useRoute();
const MenuItem = (path, name, icon) => h(RouterLink, { to: path }, { default: () => [h('span', { class: 'iconfont MenuIcon ' + icon }), name] })


const MenuSelectKey = computed(() => [route.name])

const items = ref([{
    key: 'Custom-Designer',
    label: MenuItem(`/Custom/Designer/app-${route.params.appId}/form-${route.params.formId}`, '页面设计', 'icon-yemiansheji'),
    title: '页面设计',
}, {
    key: 'Custom-Setting',
    label: MenuItem(`/Custom/Setting/app-${route.params.appId}/form-${route.params.formId}`, '页面设置', 'icon-shezhi'),
    title: '页面设置',
}]);

</script>

<style lang="less" scoped>
.title {
    line-height: 46px;
    padding: 0 10px;
    white-space: nowrap;
    display: flex;

    span {
        font-size: 20px;
        line-height: 48px;
        margin-right: 10px
    }
}

::v-deep(.MenuIcon) {
    margin-right: 4px;
}

.Setting {
    line-height: 48px;
    padding: 0 8px;
    height: 48px;
}

.MenuStyle {
    height: 48px;
    line-height: 48px;
    justify-content: center;
    // pointer-events: ;
}

.LogoTitle {
    font-size: 20px;
    margin-left: 16px;
    font-weight: bold;
}
</style>